<template>
    <!-- 修改完整版 -->
    <div>
        <input type="text" v-model.lazy="addValue" @keyup.enter="onAdd">
        <button @click="onAdd">添加</button>
        <button @click="count++">{{ count }}</button>
    </div>
    <ul>
        <!-- <li :class="item.done?'active':''" v-for="item in fileterData" :key="item.id" @click="item.done = !item.done">{{ item.value }}</li> -->
         <li :class="{active:item.done}" v-for="item in filterData" :key="item.id" @click="item.done=!item.done">{{ item.value }}</li>
    </ul>
    <p>统计：{{ doneTotal }}/{{ todoData.length }}</p>
    <div>
        <button v-for="item in buttons" :key="item.id" :disabled="item.id==currentButton" @click="currentButton = item.id">{{ item.name }}</button>
    </div>
</template>

<script setup>
import { computed,ref, watch } from 'vue';

const todoData = ref([
    {id:1,value:'学习HTML',done:false},
    {id:2,value:'学习CSS',done:true},
    {id:3,value:'学习Vue',done:false}
])
const addValue = ref('');
const currentButton = ref(1);
const buttons = [
    {id:1,name:'全部'},
    {id:2,name:'已完成'},
    {id:3,name:'未完成'},
]
const doneTotal = computed(()=>{
    return todoData.value.filter(item=>item.done).length;
})
// 筛选出当前状态下所有数据
const filterData = computed(()=>{
    if(currentButton.value==2){
        return todoData.value.filter(item=>item.done)
    }
    if(currentButton.value==3){
        return todoData.value.filter(item=>!item.done)
    }
    return todoData.value;
})

function onAdd(){
    todoData.value.push({
        id:Date.now(),
        value:addValue.value,
        done:false
    });
    addValue.value=''
}

const count = ref(0)
watch(()=>count.value,(newValue,oldValue)=>{
    console.log("todoData发生变化,变化前",oldValue);
    console.log("todoData发生变化,变化后",newValue);
})
</script>

<style lang="scss" scoped>
    .active{
        color:red;
        text-decoration: line-through;
    }
</style>